import React, { use } from 'react';
import { LeftOutline, MoreOutline } from 'antd-mobile-icons';
import style from '../Lyf/Shopgz.module.css';
import p1 from '../Lyf/img/p1.png'
import {useNavigate} from 'react-router-dom'

export default function Shopgz() {
    const navigate=useNavigate()

    // 模拟店铺数据
    const shops = [
        { id: 1, name: "汉尚华莲旗舰店", products: 166, fans: "316万" },
        { id: 2, name: "汉尚华莲旗舰店", products: 166, fans: "316万" },
        { id: 3, name: "汉尚华莲旗舰店", products: 166, fans: "316万" },
        { id: 4, name: "汉尚华莲旗舰店", products: 166, fans: "316万" },
        { id: 5, name: "汉尚华莲旗舰店", products: 166, fans: "316万" },
    ];

    return (
        <div className={style.container}>
            {/* 顶部导航栏 */}
            <div className={style.header}>
                <LeftOutline className={style.backIcon} onClick={()=>navigate('/my')} />
                <h1 className={style.title}>店铺关注</h1>
            </div>
            
            {/* 店铺列表 */}
            <div className={style.shopList}>
                {shops.map(shop => (
                    <div key={shop.id} className={style.shopCard}>
                        {/* 店铺头部信息 */}
                        <div className={style.shopHeader}>
                            <div className={style.shopInfo}>
                                <img 
                                    src={p1}
                                    alt={shop.name} 
                                    className={style.avatar}
                                />
                                <div className={style.shopDetail}>
                                    <h3 className={style.shopName}>{shop.name}</h3>
                                    <div className={style.shopStats}>
                                        <span>商品：{shop.products}</span>
                                        <span>粉丝：{shop.fans}</span>
                                    </div>
                                </div>
                            </div>
                            <MoreOutline className={style.moreIcon} />
                        </div>
                        
                        {/* 商品展示区 */}
                        <div className={style.productGallery}>
                            <img src={p1} alt="商品1" className={style.productImage} />
                            <img src={p1} alt="商品2" className={style.productImage} />
                            <img src={p1} alt="商品3" className={style.productImage} />
                            <img src={p1} alt="商品4" className={style.productImage} />
                        </div>
                        
                        {/* 操作按钮 */}
                        <button className={style.unfollowButton}>取消关注</button>
                    </div>
                ))}
            </div>
        </div>
    );
}